<template>
  <div>
    <van-tabs @click="getdata" v-model="gz" color='#1677ff' style="height:100vh;">
      <van-tab v-for="(item, index) in gzlist" :name='item' :title="item" :key="index" v-loading='loading'>
        <ul
          class="gzBox"
          id="gzBox"
          style="
          margin:0;
            padding-bottom: 0.75rem;
            margin-top: 0.75rem;
            margin-left: 0.75rem;
            width: calc(100% - 0.75rem - 0.75rem);
            overflow: auto;
            display: flex;
            white-space: nowrap;
          "
        >
          <li
            :class="subjectid == item.id ? 'actiov' : ''"
            v-for="(item, index) in dataList"
            :key="index"
            style="
              padding: 7px 12px;
              display: inline-block;
              white-space: nowrap;
              background: #fff;
            "
            @click="changesubject(item)"
          >
            {{ item.title }}
          </li>
        </ul>
        <div
          class="conter"
          style="margin-top: 0; background: transparent; padding-top: 0"
        >
          <div class="content-li-box">
            <ul>
              <li
                :class="index % 2 == 0 ? 'noneLi' : ''"
                v-for="(it, index) in subjectChildren"
                :key="it.id"
                @click="()=>{
                  $router.push({
                    path:'/applyzaah/zaahitem',
                    query:{
                      obj:JSON.stringify({gz:gz,subjectid:subjectid,...it})
                    }
                  })
                }"
              >
                <img src="@/assets/zcfg.jpg" alt=""> 
                <div>
                  <p>{{it.title}}</p>
                  <span>￥{{it.children?it.children[0].price:it.price}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { subjectList } from "@/api/apply.js";
export default {
  computed: {
    ...mapGetters(["init", "http"]),
  },
  data() {
    return {
      gzlist:[],
      dataList:[],
      loading:false,
      subjectid:'',
      subjectChildren:[],
      gz:'',
      changeLi:false,
    }
  },
  watch:{
    subjectid:{
      handler: function() {
        // 手机屏幕的宽度
        let screenWidth = document.body.clientWidth;
        // tabs元素
        let waterfallTab = document.getElementById("gzBox");
        // console.log(screenWidth, "手机屏幕的宽度");
        //使用setTimeout是因为不能实时的获取被点击的盒子，每次只能拿到上一次点击的盒子
        setTimeout(() => {
          // 被选中的tab元素
          let active = document.getElementsByClassName("actiov")[0];

          // console.log(active,'666');
          // 被选中的元素距离屏幕左侧的距离
          let left = active.getBoundingClientRect().left;
          // console.log(left, "left");
          //被选中盒子的宽度
          let activeDivW = active.offsetWidth;
          // console.log(activeDivW, "被选中盒子的宽度");
          // 应该居中的距离
          let centerWidth = (screenWidth - activeDivW) / 2;
          // console.log(centerWidth, "应该居中的距离");
          // 被选中盒子应该移动的距离
          let moveWidth = left - centerWidth;
          // console.log(moveWidth, "被选中盒子应该移动的距离");
          // tabs元素应该移动的距离
          // waterfallTab.scrollLeft += moveWidth;
          let num = 0
          let time = setInterval(()=>{
            if(moveWidth>0){
              if(num<moveWidth){
                num+=20
                waterfallTab.scrollLeft+=20
              }else{
                clearInterval(time)
              }
            }else{
              if(num>moveWidth){
                num-=20
                waterfallTab.scrollLeft-=20
              }else{
                clearInterval(time)
              }
            }
          },30)
        });
      }
    }
  },
  created() {
    this.gzlist = this.init.selected_gz.split(",");
    this.gz=this.$route.query.name
    this.getdata(this.gz?this.gz:this.gzlist[0])
    // this.$nextTick(()=>{
    //   this.selectedIndex=document.getElementsByClassName('noneLi')[0]
    //   console.log(this.selectedIndex);
    // })
  },
  methods: {
    getdata(item) {
      // let list = this.init.selected_gz.split(',')
      this.gz=item
      this.loading = true;
      this.dataList=[]
      this.subjectChildren=[]
      subjectList(item).then((res) => {
        console.log(res);
        this.loading = false;
        this.dataList = res;
        if(this.$route.query.id&&!this.changeLi){
          this.subjectid=this.$route.query.id
          res.map(it=>{
            if(this.subjectid==it.id){
              this.changesubject(it)
            }
          })
        }else{
          this.subjectid = res[0].id
          this.changesubject(res[0])
        }
      });
      // for(let i=0;i<list.length;i++){
      //     let item = list[i]
      //     let index = i
      //     await
      // }
      // this.dataList.sort(this.compare('srot'))
    },
    changesubject(data){
      this.changeLi=true
      this.subjectid = data.id;
      this.subjectChildren=data.children

    }
  },
}
</script>

<style lang="scss" scoped>
.gzBox {
  li {
    border-radius: 8px;
    margin-left: 0.75rem;
    &:first-child {
      margin-left: 0;
    }
  }
  .actiov {
    background: #1677ff !important;
    color: #fff !important;
  }
}
.conter{
  border-radius: 6px;
  margin-top: 0.75rem;
  background: #fff;
  padding: 1.8vh 3.2vw;
  overflow: auto;
  height:calc(100vh - 59px - 47px - 0.75rem) ;
}
.content-li-box {
    margin-top: 5px;
    
    & > ul {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      justify-content: space-between;

      & > li {
        list-style-type: none;
        width: 45vw;
        // height: 13vh;
        // margin-left:0.75rem;
        margin-top: 0.75rem;
        background: #fff;
        // background: #F9F9F9;
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        // justify-content: center;
        // align-items: center;
        // padding: 0 10px;
        cursor: pointer;
        border-radius: 6px;
        &>img{
          height: 16vh;
          width: 100%;
          border-radius: 6px;
        }
        p{
          // margin-top:12px;
          height: 34px;
          display: flex;
          // align-items: center;
          line-height: 16px;
        }
        span{
          color: #1677ff;
          font-weight: 600;
        }
        // span {
        //   color: #000;
        //   font-size: 1rem;
        // }

        // &:hover {
        //   background: #1677ff;
        //   span {
        //     color: #fff;
        //   }
        // }
      }
    }
  }
  .noneLi {
    margin-left: 0 !important;
  }
  ::v-deep{
    .van-tabs__content{
      
    }
  }
</style>